<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- vscode 的代码片段功能 -->
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.2/axios.js"></script>
</head>
<body>
  <button>获取书籍</button>

  <script>
    let btn = document.querySelector('button');

    //为 axios 添加请求拦截器  可以使用 axios 创建拦截器, 也可以是 axios 的实例创建拦截器
    axios.interceptors.request.use(config => {  //请求拦截器的参数名一般为 config
      console.log('请求拦截器 - 成功');
      //请求前的公共操作
      //携带公共参数
      config.headers.token = 'h5220731';
      
      //成功时 必须要返回 config 对象
      return config;
      // throw 123;
    }, error => {
      //直接抛出
      throw error;
    });

    //添加响应拦截器            response 会接收到完整的响应结果   status  statusText  headers   data  config  request
    axios.interceptors.response.use(response => {
      console.log('响应拦截器 - 成功');
      console.log(response);
      //返回响应结果值
      // return response;
    }, error => {
      console.log('响应拦截器 - 失败');
      throw error;
    });

    btn.onclick = function(){
      axios.get('http://127.0.0.1:3000/book')
      .then(response => {
        console.log(response);
      }, error => {
        console.log(error);
      })
    }

    // let p = Promise.reject('Error')
    // p.then(v => {
    //   console.log(v)
    // }).then(v => {
    //   console.log(v);
    // }, err => {
    //   console.log(err);
    // })

  </script>
</body>
</html>